<template>
<div class="container">
    <el-row>
        <el-col :span="2">
            <div style="float: left;font-size: 16px;font-stretch: semi-condensed;margin-top: 8px">文章分类管理:</div>
        </el-col>
        <el-col :span="8">
            <el-col :span="6">
                <el-form ref="formInline" v-model="addTypeName" style="float: left">
                    <el-input v-model="addTypeName" placeholder="请输入分类名称"></el-input>
                </el-form>
            </el-col>
            <el-col :span="9" style="margin-left: 20px">
                <el-select v-model="currentGroup" placeholder="选择分组">
                    <el-option v-for="item in this.docgroups" :key="item.Int" :label="item.Name" :value="item.Int"></el-option>
                </el-select>
            </el-col>
            <el-col :span="3" style="margin-left: 20px">
                <el-button type="primary" @click="putArticleType">新建分类</el-button>
            </el-col>
        </el-col>
    </el-row>
    <el-row style="width: 800px; background: #505458">
        <el-col style="margin-top: 20px;width: 800px;">
            <el-table :data="doctypes" border style="width: 700px;text-aligin: center;border-radius: 4px;  ">
                <el-table-column prop="id" label="文章类型id" width="120">
                </el-table-column>
                <el-table-column prop="type_name" label="文章类型名字" width="250">
                </el-table-column>
                <el-table-column prop="group_name" label="分组" width="100">
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="editArticleType(scope)">编辑</el-button>
                        <el-button type="primary" @click="showconfirmdelete(scope)">刪除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
</div>
</template>

<script>
import Vue from 'vue';
import axios from "@/api/ajax.js";
import Table from 'element-ui/lib/table';
import TableColumn from 'element-ui/lib/table-column';
import Pagination from 'element-ui/lib/pagination';
import Message from 'element-ui/lib/message'
import MessageBox from "element-ui/lib/message-box"

Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Pagination);

export default {
    name: "article_type",
    components: {},
    data: () => {
        return {
            doctypes: {},
            addTypeName: "",
            docgroups: [],
            currentGroup: 0,
        };
    },
    methods: {
        editArticleType(row) {
            MessageBox.prompt('请输入新分类名称', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({
                value
            }) => {
                Message({
                    type: 'success',
                    message: '你的邮箱是: ' + row.row.id
                });
            }).catch(() => {
                Message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        showconfirmdelete(row) {
            MessageBox.confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios.delete('/article_type' + "?id=" + row.row.id, {}).then(response => {
                    if (response.data.Status === 0) {
                        Message("删除分类成功");
                        this.getArticleType();
                    }
                }).catch(reason => {
                    Message.error("网络错误:" + reason);
                });
                Message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                Message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        getArticleType() {
            axios.get('/article_type', {}).then(response => {
                if (response.data.Status === 0) {
                    this.doctypes = response.data.Data;
                }
            }).catch(reason => {
                Message.error("网络错误:" + reason);
            });
        },
        putArticleType() {
            axios.put('/article_type' + '?name=' + this.addTypeName + '&group=' + this.currentGroup, {}).then(response => {
                if (response.data.Status === 0) {
                    Message({
                        type: 'success',
                        message: '新建分类成功!'
                    })
                } else {
                    Message({
                        type: 'error',
                        message: '新建分类失败!'
                    });
                }
                this.getArticleType();
            }).catch(reason => {
                Message.error("网络错误:" + reason);
            })
        },
        getDocGroup() {
            axios.get('/doc_groups', {}).then(response => {
                if (response.data.Status === 0) {
                    console.log(response.data.Data);
                    this.docgroups = response.data.Data;
                } else {}
            }).catch(reason => {
                Message.error("网络错误:" + reason);
            });
        },
    },
    created() {
        this.getArticleType();
        this.getDocGroup();
    },
    mounted() {

    },
    beforeCreate() {

    }
};
</script>

<style>
.container {
    width: 100%;
}

.md-text {
    font-size: 12px;
    width: 100%;
}

.md-body {
    width: 100%;
    margin-left: 20px;
}

.md-text1 {
    font-size: 15px;
    margin-top: 10px;
}

.mavonEditor {
    width: 100%;
    height: 800px;
}
</style>
